<template>
  <view class="login-container">
    <!-- 顶部登录标题 -->
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">欢迎登录</text>
    </view>

    <!-- 登录表单区域 -->
    <view class="login-form">
      <!-- 使用更简单的切换按钮 -->
      <view class="tab-wrapper">
        <view v-for="(item, index) in tabsList" :key="index" class="tab-item" :class="{ active: current === index }" @click="handleTabChange(index)">
          {{ item.name }}
        </view>
      </view>

      <!-- 账号密码登录 -->
      <view v-if="current === 0" class="form-box">
        <u-form :model="accountForm" ref="accountForm">
          <form @submit.prevent="handleLogin">
            <u-form-item>
              <u-input v-model="accountForm.username" placeholder="请输入账号" prefixIcon="account" clearable name="username" autocomplete="username" />
            </u-form-item>
            <u-form-item>
              <u-input v-model="accountForm.password" type="password" placeholder="请输入密码" prefixIcon="lock" clearable name="password" autocomplete="current-password" />
            </u-form-item>
          </form>
        </u-form>
      </view>

      <!-- 手机验证码登录 -->
      <view v-if="current === 1" class="form-box">
        <u-form :model="phoneForm" ref="phoneForm">
          <form @submit.prevent="handleLogin">
            <u-form-item>
              <u-input v-model="phoneForm.phone" placeholder="请输入手机号" prefixIcon="phone" clearable name="phone" autocomplete="tel">
                <template slot="suffix">
                  <u-button @tap="getCode" :text="disabled ? `${timer}s` : '获取验证码'" type="primary" size="mini" :disabled="disabled"></u-button>
                </template>
              </u-input>
            </u-form-item>
            <u-form-item>
              <u-input v-model="phoneForm.code" placeholder="请输入验证码" prefixIcon="lock" clearable name="code" autocomplete="one-time-code"></u-input>
            </u-form-item>
          </form>
        </u-form>
      </view>

      <!-- 登录按钮 -->
      <view class="btn-group">
        <u-button type="primary" text="登录" :customStyle="{ marginTop: '40rpx' }" @click="handleLogin"></u-button>
      </view>

      <!-- 底部操作区 -->
      <view class="bottom-ops">
        <text class="forget-pwd" @click="goForgetPwd">忘记密码？</text>
        <text class="register" @click="goRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabsList: [{ name: '账号密码登录' }, { name: '手机验证码登录' }],
      current: 0,
      accountForm: {
        username: '',
        password: ''
      },
      phoneForm: {
        phone: '',
        code: ''
      },
      disabled: false,
      timer: 60
    }
  },
  onReady() {
    setTimeout(() => {
      this.current = 0
    }, 200)
  },
  methods: {
    // 切换登录方式
    handleTabChange(index) {
      this.current = index
    },

    // 获取验证码
    async getCode() {
      if (!this.phoneForm.phone) {
        uni.$u.toast('请输入手机号')
        return
      }
      // 手机号格式验证
      if (!uni.$u.test.mobile(this.phoneForm.phone)) {
        uni.$u.toast('手机号格式不正确')
        return
      }

      try {
        // 调用发送验证码接口
        // await this.$store.dispatch('user/sendSmsCode', this.phoneForm.phone)
        // uni.$u.toast('验证码发送成功')
        // 开始倒计时
        this.disabled = true
        this.timer = 60
        const countdown = setInterval(() => {
          this.timer--
          if (this.timer <= 0) {
            clearInterval(countdown)
            this.disabled = false
            this.timer = 60
          }
        }, 1000)
      } catch (error) {
        uni.$u.toast(error.message || '验证码发送失败')
      }
    },

    // 登录处理
    async handleLogin() {
      try {
        if (this.current === 0) {
          // 账号密码登录
          if (!this.accountForm.username || !this.accountForm.password) {
            uni.$u.toast('请输入账号和密码')
            return
          }
          await this.$store.dispatch('user/login', {
            username: this.accountForm.username,
            password: this.accountForm.password
          })
        } else {
          // 手机验证码登录
          if (!this.phoneForm.phone || !this.phoneForm.code) {
            uni.$u.toast('请输入手机号和验证码')
            return
          }
          await this.$store.dispatch('user/loginByPhone', {
            phone: this.phoneForm.phone,
            code: this.phoneForm.code
          })
        }

        // 登录成功后跳转
        uni.switchTab({
          url: '/pages/index/index'
        })
      } catch (error) {
        uni.$u.toast(error.message || '登录失败')
      }
    },

    // 跳转忘记密码
    goForgetPwd() {
      uni.navigateTo({
        url: '/pages/forget-password/index'
      })
    },

    // 跳转注册
    goRegister() {
      uni.navigateTo({
        url: '/pages/register/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx;
  button {
    border-radius: 45rpx;
  }

  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0;

    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 30rpx;
    }

    .title {
      font-size: 44rpx;
      font-weight: bold;
      color: #303133;
      letter-spacing: 2rpx;
    }
  }

  .login-form {
    margin-top: 40rpx;
    padding: 0 20rpx;

    .tab-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 50rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #f5f5f5;
      }

      .tab-item {
        padding: 20rpx 30rpx;
        font-size: 32rpx;
        color: #666;
        position: relative;
        transition: all 0.3s;

        &.active {
          color: #2979ff;
          font-weight: 500;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60rpx;
            height: 4rpx;
            background-color: #2979ff;
            border-radius: 2rpx;
          }
        }
      }
    }

    .form-box {
      margin-top: 50rpx;
      :deep(.u-form-item) {
        margin-bottom: 30rpx;

        .u-input {
          height: 90rpx;
          background-color: #f8f8f8;
          border-radius: 45rpx;
          padding: 0 30rpx;

          &__content__field {
            font-size: 28rpx;
          }
        }
      }
    }
  }

  .btn-group {
    margin-top: 60rpx;
    padding: 0 20rpx;

    :deep(.u-button) {
      height: 90rpx;
      border-radius: 45rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .bottom-ops {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 20rpx;

    .forget-pwd,
    .register {
      color: #2979ff;
      font-size: 28rpx;
      position: relative;
      padding: 10rpx 20rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

:deep(.u-button--mini) {
  padding: 0 20rpx;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}
</style>
